<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <style>
        .init{
            font-size: 12px;
            color: #cccccc;
        }

        .success{
            color:green;
            font-size: 12px;
        }

        .fail{
            color:red;
            font-size: 12px;
        }
    </style>
</head>
<body>
<!--实现注册用户的用户的检测-->
    <form id="registerForm">
        <input type="text" id="username" onblur="checkValue(this)">
        <span id="username_span" class="init">* 请你输入用户名</span>
    </form>
    <script>
        function checkValue(obj) {
            console.log("===1begin====");
            let username=obj.value;//拿到输入的数据

            //将这个数据发送到后台servlet
            //1.创建一个XMLHttpRequest对象[ajax最核心的对象]
            //1-1.页面发送数据到后台
            //1-2. 后台可以接收到数据
            //1-3. 页面可以接收后台响应过来的数据
            //1-4. 保证真个数据交互的过程是页面局部刷新，整个页面并没有重新加载

            //固定的编程步骤
            //1.创建对象
            let xmlHttpRequest=new XMLHttpRequest();

            //2.注册一个回调函数
            //什么是回调函数? 可以把一个函数作为参数传入到另外一个函数中
            //回调函数触发的时机

            //细节 - 此处单独开辟一个新的线程

            //xmlHttpRequest的一个属性readyState的状态属性值的改变有关
            //每个步骤，这个状态值都会进行变化，从0-4,每次改变都会触发这回调函数
            xmlHttpRequest.onreadystatechange=function () {
                //接收到后台响应的数据之后，该干的事情
                //主要的事情 -1.接收后台返回的json字符串数据；2.js操作dom
                //jquery语法中的success:function(data){...}
                if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                    //获取狗太返回过来的json数据
                    let result=xmlHttpRequest.responseText;
                    //此处的result和jquery语法中的data的区别就是
                    //result时一个json字符串，jquery中的json就是json对象

                    //将字符串形式的result的json格式转换成js里面的json对象
                    let result_obj=JSON.parse(result);

                    let span_obj=document.getElementById("username_span");

                    if(result_obj.code=="200"){
                        //js操作dom属性值
                        span_obj.className="success";
                    }else{
                        span_obj.className="fail";
                    }
                    span_obj.innerText="* "+result_obj.msg;

                    if(username.length==0){
                        span_obj.className="init";
                        span_obj.innerText="* 请你输入用户名";
                    }
                    console.log("====2middle====");
                }
            };

            //3.准备请求参数 -post请求的参数是设置到send方法中
            xmlHttpRequest.open("post","/prj/ajax/check",true);

            //post方式需要自己设置http的请求头
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            //4.发送请求 - 如果是get请求可以直接使用send(),方法中可以不传入参数
            //post请求的参数是放在了请求头信息中的form-data请求体对象中
            xmlHttpRequest.send("uname="+username);

            console.log("===3end====")
        }
    </script>
</body>
</html>